---
title: <UserButton />
---

The `<UserButton />` component provides an easy-to-use dropdown menu button that displays user account information and session management actions. It includes an avatar, provides quick access to user settings, linked accounts, and session management actions.  

<img alt="Seto" src="/avatars/seto.png" className="size-8 rounded-full -mb-6 -mt-2" />
<img alt="User Dropdown Dark" src="/screenshots/user-dropdown-dark.png" className="border-r rounded-lg hidden dark:block w-44" />
<img alt="User Dropdown Light" src="/screenshots/user-dropdown-light.png" className="border-r rounded-lg dark:hidden w-44" />

## Usage

```tsx
import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return <UserButton />;
}
```

## Reference

These are the available props for the `<UserButton />` component:

<AutoTypeTable path="../src/components/user-button.tsx" name="UserButtonProps" />

## Examples

### Icon Size Button

The `size="icon"` prop turns the UserButton into a small button, showing only the user's avatar. This is the default size.

<img alt="Seto" src="/avatars/seto.png" className="size-8 rounded-full -mb-6" />
<img alt="User Dropdown Dark" src="/screenshots/user-dropdown-dark.png" className="border-r rounded-lg hidden dark:block w-44" />
<img alt="User Dropdown Light" src="/screenshots/user-dropdown-light.png" className="border-r rounded-lg dark:hidden w-44" />

```tsx
import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return (
    <UserButton />
  )
}
```

### Full Width Button

The `size="full"` prop turns the UserButton into a wide button, showing the user's avatar, name or email, and dropdown arrow. Recommended for desktop user menus.

<img alt="Seto" src="/screenshots/user-button-dark.png" className="rounded-lg hidden dark:block w-64" />
<img alt="Seto" src="/screenshots/user-button-light.png" className="rounded-lg dark:hidden w-64" />

```tsx
import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return <UserButton size="full" />
}
```

### Styling

You can fully customize the appearance of the UserButton component with [`UserButtonClassNames`](/api-reference/user-button-class-names) using the `classNames` prop.

Here's an example that drastically customizes the styling:

<img alt="Seto" src="/screenshots/custom-user-button-dark.png" className="rounded-lg hidden dark:block w-64" />
<img alt="Seto" src="/screenshots/custom-user-button-light.png" className="rounded-lg dark:hidden w-64" />

```tsx
import { UserButton } from "@daveyplate/better-auth-ui";

export default function Example() {
  return (
    <UserButton
      className="border-destructive w-64 bg-destructive/30"
      classNames={{
        content: {
          avatar: {
            fallback: "bg-destructive text-white"
          }
        }
      }}
      size="full"
    />
  )
}
```